<script setup lang="tsx">
import { PropType, computed, ref, reactive } from 'vue'
import { Dialog } from '@/components/Dialog'
import { ContentWrap } from '@/components/ContentWrap'
import { ElMessage, ElTree } from 'element-plus'
import { getAllUsableMenuTreeApi, getRoleMenuListApi } from '@/api/system/menu'
import { MenuTree, SystemRole, SystemRoleAssignMenus } from '@/api/system/role/types'
import { assignMenusApi } from '@/api/system/role'
const props = defineProps({
  modelValue: {
    type: Boolean
  },
  role: {
    type: Object as PropType<SystemRole>,
    required: true
  }
})
const roleName = props.role?.roleName
const loading = ref(false)
const emit = defineEmits(['update:modelValue'])
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
const getRoleMenuList = async () => {
  if (props.role && props.role.roleId) {
    const menuListRes = await getRoleMenuListApi(props.role.roleId)
    if (menuListRes) {
      defaultChecked.value = menuListRes.data
      message.title = '已选菜单 ' + defaultChecked.value.length
    }
  }
}
getRoleMenuList()
const getAllUsableMenuTree = async () => {
  const res = await getAllUsableMenuTreeApi()
  if (res) {
    menuTree.value = res.data
  }
}
getAllUsableMenuTree()
const treeRef = ref<InstanceType<typeof ElTree>>()
const roleAuthorize = async () => {
  loading.value = true
  const childrenIds = treeRef.value!.getCheckedKeys()
  const parentIds = treeRef.value!.getHalfCheckedKeys()
  const menuIds = parentIds.concat(childrenIds).join(',')
  const params: SystemRoleAssignMenus = {
    roleId: props.role?.roleId,
    menuIds: menuIds
  }
  const res = await assignMenusApi(params)
  if (res) {
    ElMessage.success('授权成功')
    dialogVisible.value = false
  }
  loading.value = false
}
const menuTree = ref<MenuTree[]>([])
const defaultChecked = ref<number[]>([])
const renderContent = (h, { node, data }) => {
  let className = ''
  if (data.menuType === '2') {
    className = 'horizontal'
  }
  return h('p', { class: className }, node.label)
}
const message = reactive({
  title: '已选菜单 0'
})
const checkNode = () => {
  const childrenIds = treeRef.value!.getCheckedKeys()
  const parentIds = treeRef.value!.getHalfCheckedKeys()
  const number = childrenIds.length + parentIds.length
  message.title = '已选菜单 ' + number
}
</script>
<template>
  <div>
    <Dialog v-model="dialogVisible" title="角色授权">
      <ContentWrap style="border: 0">
        <el-row :gutter="20">
          <el-col :span="4" class="role-label"> 角色名称</el-col>
          <el-col :span="18" style="padding: 0">
            <el-input v-model="roleName" disabled style="width: 50%" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16" :offset="4" style="padding: 0">
            <el-alert
              :title="message.title"
              type="success"
              :closable="false"
              style="border-radius: 0"
            />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16" :offset="4" style="border: 1px solid #e5e6e7; padding: 0">
            <el-scrollbar height="250px">
              <ElTree
                ref="treeRef"
                :data="menuTree"
                :render-content="renderContent"
                highlight-current
                default-expand-all
                show-checkbox
                node-key="menuId"
                :default-checked-keys="defaultChecked"
                @check="checkNode"
                :check-strictly="true"
              />
            </el-scrollbar>
          </el-col>
        </el-row>
      </ContentWrap>
      <template #footer>
        <el-button type="primary" :loading="loading" @click="roleAuthorize()">保存 </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </template>
    </Dialog>
  </div>
</template>
<style lang="less" scoped>
.el-row {
  margin-bottom: 10px;
}
.role-label {
  text-align: right;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.el-tree::-webkit-scrollbar {
  width: 5px;
}

.el-tree::-webkit-scrollbar-thumb {
  background: var(--el-disabled-text-color);
}

.el-tree::-webkit-scrollbar-thumb:hover {
  background: var(--el-disabled-text-color);
}
</style>
